<template>
    <div class="se-container">
        <div class="se-header">工资单管理</div>
        <div class="se-body">
            <div
                class="filter-header"
                ref="filter"
                v-if="selectionList.length === 0"
            >
                <div class="filter-box">
                    <div class="icon-search">
                        <el-input
                            placeholder="请输入岗位名称"
                            v-model="params.keyword"
                            @keyup.enter.native="searchClick"
                        >
                        </el-input>
                        <i
                            class="el-icon-search"
                            @click="searchClick"
                        ></i>
                    </div>
                    <el-date-picker
                        v-model="params.month"
                        type="month"
                        placeholder="选择月份"
                    >
                    </el-date-picker>
                    <el-select
                        v-model="params.structure"
                        @change="selectedChange"
                        :clearable="true"
                        placeholder="部门"
                    >
                        <el-option
                            v-for="(item, index) in structureArr"
                            :key="index"
                            :label="item.name"
                            :value="item.structure_id"
                        >
                        </el-option>
                    </el-select>
                    <el-button
                        type="primary"
                        @click="searchClick"
                    >筛选</el-button>
                    <el-dropdown class="fr more-bth" trigger="click" @command="handleTreeSetDrop">
                        <el-button @click.stop="getChild()">更多<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-for="(item, index) in treeSetTypes" :key="index" :command="item">{{item.name}}</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
            <flexbox
                v-if="selectionList.length > 0"
                class="selection-bar"
            >
                <div class="selected—title">已选中<span class="selected—count">{{selectionList.length}}</span>项</div>
                <flexbox class="selection-items-box">
                    <flexbox
                        class="selection-item"
                        v-for="(item, index) in selectionInfo"
                        :key="index"
                        @click.native="selectionBarClick(item.type)"
                    >
                        <img
                            class="selection-item-icon"
                            :src="item.icon"
                        />
                        <div class="selection-item-name">{{item.name}}</div>
                    </flexbox>
                </flexbox>
            </flexbox>
            <el-table
                class="main-table"
                id="examine-table"
                v-loading="loading"
                :data="tableData"
                :height="tableHeight"
                highlight-current-row
                style="width: 100%"
                @selection-change="handleSelectionChange"
                @row-click="handleRowClick"
            >
                <el-table-column
                    v-if="userConfirmAuth"
                    type="selection"
                    width="55"
                ></el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    v-for="(item, index) in fieldList"
                    :key="index"
                    :prop="item.prop"
                    :width="item.width"
                    :label="item.label"
                    :align="item.align"
                >
                    <template
                        slot="header"
                        slot-scope="scope"
                    >
                        <div class="table-head-name">{{scope.column.label}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="150"
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-button
                            v-if="userConfirmAuth&&scope.row['status']==10"
                            @click="handleClick('confirm', scope)"
                            type="text"
                            size="small"
                        >工资确认</el-button>
                        <el-button
                            v-if="userDetailAuth"
                            @click="handleClick('record', scope)"
                            type="text"
                            size="small"
                        >详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="p-contianer">
                <el-pagination
                    class="p-bar"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size.sync="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                >
                </el-pagination>
            </div>
        </div>
        <create
            v-if="showHandleView"
            :handle="createHandleInfo"
            @save="getList"
            @hiden-view="showHandleView=false"
        ></create>
        <detail
            v-if="showDetail"
            :data="detailData"
            @refresh="getList"
            @hide-view="showDetail=false"
        >
        </detail>
        <!-- 工资单确认 -->
        <el-dialog
            title="工资单确认"
            :visible.sync="positionAssignVisible"
            width="50%"
            v-loading="loading"
            :close-on-click-modal="false"
            :modal-append-to-body="false"
            :before-close="positionAssignClose"
        >
            <div class="el-password">
                <el-form
                    ref="passForm"
                    :model="passForm"
                >
                    <el-form-item
                        label="待确认："
                    >
                        <div class="position-tag">
                            <el-tag type="info" v-for="(item, index) in selectionList" :key="index">{{item.realname}}</el-tag>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button @click="positionAssignClose">取 消</el-button>
                <el-button
                    type="primary"
                    @click="positionAssignSubmit(passForm)"
                >确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Create from "./components/create";
import Detail from "./components/detail";
import {
    strucListAPI,
    hrSalaryListAPI,
    exportSalaryListAPI,
    comfirmSalaryAPI
} from "@/api/personnel/personnel";
import { mapGetters } from "vuex";
import { downloadFilesExcel } from "@/utils/tool";

export default {
    /** 系统管理 的 审核管理 */
    name: "system-examine",
    components: {
        Create,
        Detail
    },
    mixins: [],
    data() {
        return {
            loading: false, // 加载动画
            tableHeight: document.documentElement.clientHeight - 270, // 表的高度
            structureArr: [],
            // 列表
            params: {
                keyword: "",
                month: "",
                structure: "",
            },
            selectionList: [], // 批量勾选数据
            positionAssignVisible: false,
            passForm: {},
            tableData: [],
            fieldList: [
                {
                    prop: "realname",
                    label: "姓名",
                    width: 100,
                },
                {
                    prop: "struc_name",
                    label: "部门",
                    width: 200
                },
                {
                    prop: "position",
                    label: "职位",
                    width: 200
                },
                {
                    prop: "base_pay",
                    label: "基本工资",
                    align: "center",
                    width: 100
                },
                {
                    prop: "achivement_salary",
                    label: "个人绩效工资",
                    align: "center",
                    width: 100
                },
                {
                    prop: "struc_achive_salary",
                    label: "部门绩效工资",
                    align: "center",
                    width: 100
                },
                {
                    prop: "bonus",
                    label: "个人业绩奖金",
                    align: "center",
                    width: 100
                },
                {
                    prop: "struc_bonus",
                    label: "部门业绩奖金",
                    align: "center",
                    width: 100
                },
                {
                    prop: "total_money",
                    label: "应发工资",
                    align: "center",
                    width: 100
                },
                {
                    prop: "status_text",
                    label: "hr确认",
                    align: "center",
                    width: 100
                },
            ],
            currentPage: 1,
            pageSize: 10,
            pageSizes: [10, 20, 30, 40],
            total: 0,
            /** 展示操作框 */
            showHandleView: false,
            // 创建的相关信息
            createHandleInfo: { action: "save", id: "", position: [] },
            // 详情展示
            showDetail: false,
            detailData: {},
            /** 更多操作 */
            treeSetTypes: [],
        };
    },
    computed: {
        ...mapGetters(["hr"]),
         // 列表权限
        userListAuth() {
            return this.hr&&this.hr.salary && this.hr.salary.hrsalarylist
        },
        // 详情权限
        userDetailAuth() {
            return this.hr&&this.hr.salary && this.hr.salary.salarydetail
        },
        // 确认权限
        userConfirmAuth() {
            return this.hr&&this.hr.salary && this.hr.salary.comfirmsalary
        },
        // 分配人事专员权限
        userAssignAuth() {
            return this.hr&&this.hr.salary && this.hr.salary.assignhr
        },
        // 导出权限
        tableExportAuth() {
            return this.hr&&this.hr.salary && this.hr.salary.exportsalarylist
        },
        selectionInfo: function() {
            let temps = [];
            if (this.userConfirmAuth) {
                temps.push({
                        name: "工资单确认",
                        type: "confirm",
                        icon: require("@/assets/img/selection_start.png")
                    })
            }
            return temps;
        },
    },
    mounted() {
        var self = this;
        /** 控制table的高度 */
        window.onresize = function() {
            self.tableHeight = document.documentElement.clientHeight - 270;
        };
        this.getStrucList();
        this.getList();
    },
    methods: {
        /**
         * 更多操作
         */
        getChild() {
            var temps = []
            if (this.tableExportAuth) {
                temps.push({ type: 'export', name: '导出' })
            }
            this.treeSetTypes = temps
        },
        // 更多操作事件
        handleTreeSetDrop(command) {
            if (command.type == 'export') {
                this.exportClick()
            }
        },
        /** 获取部门 */
        getStrucList() {
            let params = {};
            strucListAPI(params)
                .then(res => {
                    if (res.data) {
                        this.structureArr = res.data
                    }
                })
                .catch(() => {});
        },
        /** 部门选择回调 */
        selectedChange () {

        },
        /** 获取列表 */
        getList() {
            this.loading = true;
            let params = this.params;
            params.page = this.currentPage;
            params.limit = this.pageSize;
            hrSalaryListAPI(this.params)
                .then(res => {
                    let list = res.data.list
                    for (var i = 0; i< list.length; i++) {
                        if (list[i].status == 10) {
                            list[i].status_text = "待确认"
                        } else if (list[i].status == 20) {
                            list[i].status_text = "已确认"
                        }
                    }
                    this.tableData = res.data.list;
                    this.total = res.data.dataCount;
                    this.loading = false;
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        /** 筛选 */
        searchClick() {
            this.currentPage = 1;
            this.getList();
        },
        /** 添加审批流 */
        addClick() {
            this.createHandleInfo = {
                action: "save",
                position: this.position,
                id: ""
            };
            this.showHandleView = true;
        },
        /** 列表操作 */
        // 当某一行被点击时会触发该事件
        handleRowClick(row, column, event) {
            if (column.property&&this.userDetailAuth) {
                this.detailData = row;
                this.showDetail = true;
            }
        },
        // 更改每页展示数量
        handleSizeChange(val) {
            this.pageSize = val;
            this.getList();
        },
        // 更改当前页数
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getList();
        },
        // 勾选
        handleSelectionChange(val) {
            this.selectionList = val; // 勾选的行
        },
        // 操作
        handleClick(type, scope) {
            if (type === "confirm") {
                this.salaryConfirm(scope)
            } else if (type === "delete") {
                // 删除记录
                this.$confirm("您确定要删除该条记录?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        recordDelAPI({
                            record_id: scope.row["id"]
                        })
                            .then(res => {
                                this.tableData.splice(scope.$index, 1);
                                this.getList();
                                this.$message({
                                    type: "success",
                                    message: res.data
                                });
                            })
                            .catch(() => {});
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除"
                        });
                    });
            } else if (type === "record") {
                this.detailData = scope.row;
                this.showDetail = true
            }
        },
        // excel导出
        exportClick () {
            let api = exportSalaryListAPI
            let params = {
                keyword: this.params.keyword,
                month: this.params.month,
                structure: this.params.structure,
            }
            // if (this.timeTypeValue.type) {
            //     if (this.timeTypeValue.type == 'default') {
            //         params.type = this.timeTypeValue.value
            //     } else {
            //         params.start_time = timestampToFormatTime(this.timeTypeValue.startTime, 'YYYY-MM-DD')
            //         params.end_time = timestampToFormatTime(this.timeTypeValue.endTime, 'YYYY-MM-DD')
            //     }
            // }
            downloadFilesExcel(api, params)
        },
        /** 工资确认 */
        selectionBarClick(type) {
            var ids = this.selectionList.map(function(item, index, array) {
                return item.id;
            });
            if (type === "confirm") {
                this.positionAssignVisible = true;
            }
        },
        // 工资确认 -- 关闭按钮
        positionAssignClose() {
            this.selectHrId = "";
            this.positionAssignVisible = false;
        },
        // 工资确认 -- 确定按钮（批量）
        positionAssignSubmit(val) {
            var ids = [];
            if (this.selectionList.length > 0) {
                ids = this.selectionList.map(function(item, index, array) {
                    return item.id;
                });
            } else {
                this.$message({
                    type: "info",
                    message: "请选择工资单"
                });
                return null
            }
            var params = {
                salary_ids: ids.join(",")
            }
            this.loading = true;
            comfirmSalaryAPI(params)
                .then(res => {
                    if (res.code === 200) {
                        this.$message.success("确认成功");
                        this.getList()
                    } else {
                        this.$message({
                            type: "info",
                            message: res.msg
                        });
                    }
                    this.positionAssignClose();
                    this.loading = false;
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        // 工资确认（单项）
        salaryConfirm (scope) {
            // 删除记录
            this.$confirm("确认该条工资单信息无误?", "工资单确认", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    var params = {
                        salary_ids: scope.row["id"]
                    }
                    this.loading = true;
                    comfirmSalaryAPI(params)
                        .then(res => {
                            if (res.code === 200) {
                                this.$message.success("确认成功");
                                this.getList()
                            } else {
                                this.$message({
                                    type: "info",
                                    message: res.msg
                                });
                            }
                            this.positionAssignClose();
                            this.loading = false;
                        })
                        .catch(() => {
                            this.loading = false;
                        });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
        }
    }
};
</script>

<style lang="scss" scoped>
.se-header {
    height: 60px;
    position: relative;
    z-index: 100;
    padding: 0 20px;
    font-size: 18px;
    line-height: 60px;
}

.se-body {
    background-color: white;
    border: 1px solid #e6e6e6;
    border-radius: 2px;
}

.se-table-header {
    height: 50px;
    background-color: white;
    position: relative;
    .se-table-header-button {
        float: right;
        margin-right: 20px;
        margin-top: 10px;
    }
}

.p-contianer {
    position: relative;
    background-color: white;
    height: 44px;
    .p-bar {
        float: right;
        margin: 5px 100px 0 0;
        font-size: 14px !important;
    }
}

/* 搜索框图标按钮 */
.icon-search .el-icon-search {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    font-size: 20px;
    color: #ccc;
}
/* 设置flex布局 */
.flex-index {
    display: flex;
    flex-direction: column;
}
/* 设置占位 */
.flex-box {
    flex: 1;
    border-bottom: 1px solid #e6e6e6;
}
/* 搜索框 */
.icon-search {
    width: 280px;
    position: relative;
    float: left;
    margin: 0 4px 0 0;
}

/** 勾选操作 */
.selection-bar {
    font-size: 12px;
    height: 54px;
    min-height: 54px;
    padding: 0 20px;
    color: #777;

    .selected—title {
        flex-shrink: 0;
        padding-right: 20px;
        border-right: 1px solid $--table-border-color;
        .selected—count {
            color: $xr-color-primary;
        }
    }
}
.selection-items-box {
    .selection-item {
        width: auto;
        padding: 15px;
        .selection-item-icon {
            display: block;
            margin-right: 5px;
            width: 15px;
            height: 15px;
        }
        .selection-item-name {
            cursor: pointer;
            color: #777;
        }
        .selection-item-name:hover {
            color: $xr-color-primary;
        }
    }
}
.position-tag{
    margin-left: 82px;
}
.position-tag span{
    margin: 0 5px 5px 0;
}
.more-bth /deep/ .el-button{
    color: #777;
    font-weight: normal;
}

@import "@/styles/table.scss";
</style>
